<template>
    <view class="EveryDayUserHead">
        <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/user-bg.png" class="bg"></image>
        <view class="user-info ">
            <view class="flex between item-center">
                <view class="flex f_1">
                    <image :src="loginData.avatar" class="img_bg" />
                    <view class="user-account flex flex-column around f_1">
                        <view class="nickname flex flex-row item-center">
                            <text class="line-1">{{ loginData.nickName || "--" }}</text>
                            <label class="fs_0" v-if="loginData.isVip">VIP</label>
                        </view>
                        <view>{{ loginData.phone }}</view>
                    </view>
                </view>
            </view>
            <view class="historyStatistics flex" v-if="practiceType != '2'">
                <view class="flex flex-column">
                    <text>{{ headInfo.score ? headInfo.score : 0 }}</text>
                    <label>得分</label>
                </view>
                <view class="flex flex-column">
                    <text>{{ headInfo.no ? headInfo.no : 0 }}</text>
                    <label>排名</label>
                </view>
                <view class="flex flex-column">
                    <text>{{ headInfo.pass ? '合格' : '不合格' }}</text>
                    <label>成绩</label>
                </view>
            </view>
            <view class="historyStatistics flex" v-if="practiceType == '2'">
                <view class="flex flex-column">
                    <text>{{ headInfo.answerNum ? headInfo.answerNum : 0 }}</text>
                    <label>答题</label>
                </view>
                <view class="flex flex-column">
                    <text>{{ headInfo.rate ? `${headInfo.rate}%` : 0 }}</text>
                    <label>正确率</label>
                </view>
                <view class="flex flex-column">
                    <text>{{ headInfo.practiceNum ? headInfo.practiceNum : 0 }}</text>
                    <label>练习次数</label>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: "scoreResultsHead",
    props: {
        headInfo: Object,
        practiceType: String
    },
    computed: {
        ...mapState(['loginData'])
    },
}
</script>

<style scoped lang="scss">
.EveryDayUserHead {
    position: relative;
    height: 168px;

    .bg {
        width: 100%;
        height: 100%;
    }

    .user-info {
        padding: 0 16px;
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% - 32px);
        margin-top: 16px;

        image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 16px;
        }

        .user-account {
            color: #FFFFFF;
            font-size: 14px;

            .nickname {
                font-size: 16px;

                label {
                    padding: 1px 5px;
                    background-color: #EED682;
                    color: #A86C12;
                    font-size: 10px;
                    margin-left: 9px;
                    border-radius: 4px;
                    height: fit-content;
                }
            }
        }

        .historyStatistics {
            color: #FFFFFF;
            font-size: 14px;
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
            padding: 0 50px;

            >view {

                text {
                    font-size: 16px;
                    font-weight: bold;
                }

                label {
                    font-size: 14px;
                }
            }
        }
    }
}
</style>